<template>
	<view>

		<view class="">
			<view style="flex: 1;flex-direction: column;">

				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(vo,index) in imgList" :key="index">
							<view class="uni-uploader__file" style="position: relative;margin: 1%;">
								<image v-if="vo.type=='img'" mode="aspectFill" class="uni-uploader__img" :src="vo.url">
								</image>
								<video v-if="vo.type=='video'" :src="vo.url" class="uni-uploader__img"></video>
								<template v-if="vo.type=='img'&&count != 1">
									<view v-if="index" class="set-capital" style="background: #0A98D5;"
										@tap="setCapital(index)">设为主图</view>
									<view v-else class="set-capital">主图</view>
								</template>
								<view style="z-index: 2;" class="close-view" @click="close(index)">x</view>
							</view>
						</block>

						<view @click="chooseImg" class="uni-uploader__input-box a-c flex j-c"
							v-if="count> imgList.length    " style="margin: 1%">
							<text class="cff bicon " style="font-size: 90upx;">&#xe7dd;</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script type="text/javascript">
	export default {
		name: 'image-choose',
		props: {

			imgList: {
				//接收的图片列表[{src:12.jpg}]
				type: Array,
				default: function() {
					return []
				}
			},
			quality: {
				//质量
				type: Number | String,
				default: 1
			},
			lei: {
				//质量
				type: Number,
				default: 0
			},
			//img 图片 video 视频 all 视频和图片
			isType: {
				type: Number | String,
				default: 'img'
			},

			count: {
				//最多数量
				type: Number,
				default: 8
			},
			changes: {
				//监听变化
				type: Function,
				default: null
			}
		},

		data() {
			return {
				tempFilePath: ''
			}
		},
		methods: {

			shili() {
				uni.previewImage({
					urls: ["https://www.banmiquan.com/img/zz.jpg"],
					current: 'https://www.banmiquan.com/img/zz.jpg'
				});
			},
			previewImage(image) { //预览图片
				uni.previewImage({
					urls: this.imgList,
					current: image
				});
			},
			chooseImg() {
				var that = this
				if (this.isType == 'img') {
					// #ifdef APP
					var that = this;
					let system = uni.getSystemInfoSync();
					if (system.platform === 'android') { // 判断平台
						uni.showModal({
							title: '此功能需要储存权限,才可上传图片',
							content: '请先同意权限才可用此功能',
							confirmText: '同意',
							cancelText: '拒绝', 
							success(res) {
								if (res.confirm) {
									that.is_img()
								}
							}
						});
						return
					}
					that.is_img()

					// #endif
					// #ifndef APP
					that.is_img()
					// #endif
					return
				}
				if (this.isType == 'video') {
					that.is_video()
					return
				}
				uni.showActionSheet({
					itemList: ['选择图片', '选择视频'],
					success: function(res) {
						if (res.tapIndex == 0) { //图片
							that.is_img()
						} else if (res.tapIndex == 1) {
							that.is_video()
							return
						}
					}
				});
			},
			is_video() {
				var that = this;
				var count = this.imgList.length;
				if (count > this.count) {
					uni.showToast({
						title: '最多只能添加' + this.count + '个视频',
						icon: 'none'
					})
					return
				}
				uni.chooseVideo({
					count: count,
					compressed: false,
					sourceType: ['camera', 'album'],
					success: function(res) {

						var data = res;
						that.src = res.tempFilePath;
						var size = res.size / 1024 / 1024;
						var videow = res.width;
						var videoh = res.height;
						console.log("size: " + JSON.stringify(size));
						if (size > 20) {
							uni.showToast({
								title: '视频大小不得超过20M哦',
								icon: "none"
							});
							return
							let crVideo = uni.compressVideo({
								src: that.src,
								resolution: 1,
								quality: 'high', //'low':低，'medium':中，'high':高  
								success: function(csRes) {
									var size = csRes.size / 1024;
									if (size > 30) {
										uni.showToast({
											title: '视频压缩后扔大于20M请重新上传小于10M的视频',
											icon: "none"
										});
										return
									}
									var imgList = that.imgList;
									var find = {
										type: 'video',
										url: csRes.tempFilePath,
										videow: videow,
										videoh: videoh
									}
									imgList.push(find)
									that.$emit("changes", imgList, 1);
								},
								fail: function(cfRes) {
									uni.showToast({
										title: '视频大小不得超过10M哦',
										icon: "none"
									});
								}
							});
							return
						} else { //不压缩直接上传
						
							var imgList = that.imgList;
							var find = {
								type: 'video',
								url: that.src,
								videow: videow,
								videoh: videoh
							}
							imgList.push(find)
							that.tempFilePath = that.src 
							that.$emit("changes", imgList, 1);
						}
					}
				});
			},
			// 视频封面提取成功
			success(o) {
				this.src1 = o
			},

			// 视频封面提取失败
			error(e) {
				console.log('error', e);
			},
			is_img() {
				var count = this.count - this.imgList.length;
				let that = this;
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count: count,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					camera: 'back',
					success(res) {
						that.img_tempFiles(res.tempFiles, 'wx-map');
					}
				})
				return
				// #endif


				uni.chooseImage({
					sourceType: ['album'],
					count: count,
					success: (res) => {
						that.img_tempFiles(res.tempFilePaths, 'no-map');
					},
				})
			},
			img_tempFiles(tempFilePaths, type) {
				var imgs = tempFilePaths || [];
				var count = imgs.length + this.imgList.length;
				var imgList = this.imgList;
				if (count <= this.count) {
					for (var i = 0; i < imgs.length; i++) {
						if (type == 'wx-map') {
							var img = imgs[i]['tempFilePath']
						} else {
							var img = imgs[i]
						}

						var find = {
							type: 'img',
							url: img
						}
						imgList.push(find)
					}
					this.$emit("changes", imgList, 0);
				} else {
					uni.showToast({
						title: '最多只能添加' + this.count + '张图片',
						icon: 'none'
					})
				}
			},

			close(e) {
				var imgList = this.imgList;
				imgList.splice(e, 1);
				this.$emit("changes", imgList, 0);

			},
			setCapital(i, name) {
				var imgList = this.imgList;
				imgList[0] = imgList.splice(i, 1, imgList[0])[0];
				this.$emit("changes", imgList, 0);
			},

		}
	}
</script>
<style scoped>
	/* #ifndef APP-NVUE */
	.set-capital {
		text-align: center;
		line-height: 30px;
		height: 30px;
		padding: 0 5px;
		right: 0;
		/* width: 30px; */
		background: #1AAD19;
		color: #FFFFFF;
		position: absolute;
		bottom: 0px;
		font-size: 12px;
	}

	.close-view {
		text-align: center;
		line-height: 14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
	}

	.uni-uploader__input-box {
		position: relative;
		width: 208upx;
		height: 208upx;
		border: 2upx solid #D9D9D9;
	}

	.uni-uploader__input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uni-uploader-body {
		margin-top: 16upx;
	}

	.uni-uploader__files {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uni-uploader__img {
		display: block;
		width: 210upx;
		height: 210upx;
	}

	/* #endif */
</style>